<template>
  <div class="revset">
    <a-layout>
      <PageHeader @back="goBack" subTitle="返回">
        {{ title }}
      </PageHeader>
      <a-row class="salary" :gutter="5">
        <a-col
          style="
            width: 38%;
            padding: 24px;

            text-align: center;
            border: 1px solid #ccc;
            border-radius: 4px;
          "
          :span="1"
        >
          <a-row ref="box" type="flex" align="middle">
            <a-col :span="11" @click="clickTab(-1)">
              <a-row class="primary">
                <a-statistic value="合计"> </a-statistic>
              </a-row>
            </a-col>
            <a-divider style="height: 42px" type="vertical" />

            <a-col :span="11" @click="clickTab(-1)">
              <a-row>
                <strong :class="state === -1 ? 'primary' : 'sub_tit'">总派单</strong>
              </a-row>
              <a-row class="primary">
                <a-statistic :value="paidancount">
                  <template #suffix>人</template>
                </a-statistic>
              </a-row>
            </a-col>
          </a-row>
        </a-col>
        <a-col style="width: 2%" :span="1"></a-col>
        <a-col style="width: 60%; padding: 24px; text-align: center; border: 1px solid #ccc; border-radius: 4px" :span="1">
          <a-row ref="box" type="flex" align="middle">
            <a-col :span="8" @click="clickTab(1)">
              <a-row>
                <strong :class="state === 1 ? 'primary' : 'sub_tit'">已完成</strong>
              </a-row>
              <a-row>
                <a-statistic :value="yiwanchengcount">
                  <template #suffix>人</template>
                </a-statistic>
              </a-row>
            </a-col>
            <a-divider style="height: 42px" type="vertical" />
            <a-col :span="7" @click="clickTab(0)">
              <a-row>
                <strong :class="state === 0 ? 'primary' : 'sub_tit'">未完成</strong>
              </a-row>
              <a-row>
                <a-statistic :value="weiwanchengcount">
                  <template #suffix>人</template>
                </a-statistic>
              </a-row>
            </a-col>
            <a-divider style="height: 42px" type="vertical" />
            <a-col :span="7" @click="clickTab(2)">
              <a-row>
                <strong :class="state === 2 ? 'primary' : 'sub_tit'">异常</strong>
              </a-row>
              <a-row>
                <a-statistic :value="yichangcount">
                  <template #suffix>人</template>
                </a-statistic>
              </a-row>
            </a-col>
          </a-row>
        </a-col>
      </a-row>

      <a-row type="flex" justify="space-between">
        <a-input-search allowClear class="mg_b12" placeholder="请输入关键字" style="width: 200px" @search="onSearchName" />

        <div>
          <a-button style="margin-right: 15px" :loading="loading" @click="daochu" type="primary" ghost> 导出 </a-button>
          <a-tooltip placement="top" v-if="!jiedanS">
            <template slot="title">
              <span>请先“确认接单”再进行反馈</span>
            </template>
            <a-button :disabled="true" :loading="loading" type="primary" ghost> 批量反馈 </a-button>
          </a-tooltip>
          <a-button v-if="jiedanS" :disabled="!hasSelected" :loading="loading" @click="start" type="primary" ghost> 批量反馈 </a-button>
          <a-button icon="file-text" class="pos" type="primary" style="margin-left: 15px" @click="onConfi" :disabled="jiedanS">
            确认接单
          </a-button>
        </div>
      </a-row>

      <div>
        <!-- table -->
        <a-table
          :row-key="(a, b) => a.id"
          :columns="tcloums"
          list-type="picture"
          :pagination="pagination"
          :data-source="dataSource"
          :scroll="{ x: 800 }"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          @change="handlePage"
        >
          <template slot="status" slot-scope="text, record">
            <span class="round" :class="['no', 'ok', 'err'][record.status]" />
            {{ ["未完成", "已完成", "异常"][record.status] }}
          </template>
          <template slot="socStartDate" slot-scope="text, record">
            {{ moment(record.socStartDate).format("YYYY-MM-DD") }}
          </template>
          <template slot="fundStartDate" slot-scope="text, record">
            {{ moment(record.fundStartDate).format("YYYY-MM-DD") }}
          </template>
          <template slot="action" slot-scope="text, record">
            <div v-if="jiedanS" class="primary" @click="handelEvent(record)" style="cursor: pointer">反馈</div>
            <a-tooltip placement="top" v-else>
              <template slot="title">
                <span>请先“确认接单”再进行反馈</span>
              </template>
              <div style="color: #00000044">反馈</div>
            </a-tooltip>
          </template>
          <!-- <div
          slot="expandedRowRender"
          slot-scope="text"
          class="expend-box"
          style="padding:0;margin:0;"
        >
          <a-row type="flex" align="middle">
            <a-col class="info-left">
              <a-row class="center">
                <a-avatar :key="text.empPhoto" :src="text.empPhoto" :size="64" />
              </a-row>
              <a-row class="center name">
                <strong>{{ text.name }}</strong>
              </a-row>
              <a-divider :dashed="true" />

              <a-row class="info-item">
                <a-col class="sub_tit" :span="12">身份证号</a-col>
                <a-col :span="12">{{ text.idCard }}</a-col>
              </a-row>
              <a-row class="info-item">
                <a-col class="sub_tit" :span="12">个人社保号</a-col>
                <a-col :span="12">--</a-col>
              </a-row>
              <a-row class="info-item">
                <a-col class="sub_tit" :span="12">个人公积金号</a-col>
                <a-col :span="12">--</a-col>
              </a-row>
              <a-row class="info-item">
                <a-col class="sub_tit" :span="12">参保城市</a-col>
                <a-col :span="12">{{ text.socCityName }}</a-col>
              </a-row>
              <a-row class="info-item">
                <a-col class="sub_tit" :span="12">缴纳方案</a-col>
                <a-col :span="12">{{ text.socProgName }}</a-col>
              </a-row>
              <a-divider :dashed="true" />
            </a-col>
            <a-col style="flex:1">
              <a-table
                :row-key="(a, b) => b"
                :columns="tcloums"
                :data-source="text.socDispatchEmpItemList.filter(item => item.isNowItem) || []"
                :pagination="false"
              >
                <template slot="persentPersonal" slot-scope="persentPersonal">
                  {{ persentPersonal }}%
                </template>
                <template slot="persentCompany" slot-scope="persentCompany">
                  {{ persentCompany }}%
                </template>
              </a-table>
              <a-row type="flex" class="inner-right-foot">
                <a-col :span="15">
                  <strong>缴费合计</strong>
                </a-col>
                <a-col :span="3" class="center">
                  <strong>{{ text.personalAmount || "--" }}</strong>
                </a-col>
                <a-col :span="3" class="center">
                  <strong>{{ text.companyAmount || "--" }}</strong>
                </a-col>
                <a-col :span="3" class="center">
                  <strong>
                    <span class="primary">{{ text.allAmount || "--" }}</span>
                  </strong>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <div />
        </div> -->
        </a-table>
      </div>
      <feed-back :visible="feedVisible" :options="feedOptions" @change="handleDetail" ref="child" />
    </a-layout>
  </div>
</template>

<script>
const columns = [
  { title: "", dataIndex: "window", scopedSlots: { customRender: "window" } },
  { title: "姓名", dataIndex: "name" },
  { title: "参保城市", dataIndex: "socCityName" },
  { title: "身份证号", dataIndex: "idCard", width: 200 },
  { title: "参保方案", dataIndex: "socProgName" },
  {
    title: "社保起缴时间",
    dataIndex: "socStartDate",
    scopedSlots: { customRender: "socStartDate" }
  },
  {
    title: "住房公积金起缴时间",
    dataIndex: "fundStartDate",
    scopedSlots: { customRender: "fundStartDate" }
  },
  { title: "指派公司", dataIndex: "assignCompanyName" },
  {
    title: "状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" }
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" }
  }
];
const tcloums = [
  {
    title: "缴纳项目",
    dataIndex: "itemName",
    align: "center",
    ellipsis: true
  },
  {
    title: "缴费基数",
    dataIndex: "cardinalityPerson",

    align: "center",
    ellipsis: true
  },
  {
    title: "个人比列",
    dataIndex: "persentPersonal",
    scopedSlots: { customRender: "persentPersonal" },
    align: "center",
    ellipsis: true
  },
  {
    title: "公司比例",
    dataIndex: "persentCompany",
    scopedSlots: { customRender: "persentCompany" },
    align: "center",
    ellipsis: true
  },
  {
    title: "个人缴费",
    dataIndex: "amountPersonal",

    align: "center",
    ellipsis: true
  },
  {
    title: "公司交费",
    dataIndex: "amountCompany",

    align: "center",
    ellipsis: true
  },
  {
    title: "缴费合计",
    dataIndex: "",
    scopedSlots: { customRender: "all" },
    align: "center",
    ellipsis: true
  }
];
import { mapState } from "vuex";
import feedBack from "./common/feed-back2";
import axios from "axios";
export default {
  name: "ShebaoDetail",
  components: { feedBack },

  data() {
    return {
      keyWord: undefined,
      columns,
      state: -1,
      tcloums,
      paidancount: 0,
      yiwanchengcount: 0,
      weiwanchengcount: 0,
      yichangcount: 0,
      defaultKey: "all",
      feedVisible: false,
      feedOptions: {},
      params: {
        status: undefined,
        showItem: true,
        pageNo: 1,
        pageSize: 10,
        name: ""
      },
      jiedanS: false,
      title: "",
      dataSource: [],
      pagination: {
        pageSize: 10,
        total: 0,
        showTotal: (total) => `共 ${total} 条`,
        current: 1,
        pageSizeOptions: ["10", "20", "50", "100"],
        showQuickJumper: true,
        showSizeChanger: true
      },
      loading: false,
      selectedRowKeys: [],
      postData: {
        finshOrError: false,
        remake: "",
        socDispatchCompanyId: "",
        socDispatchEmpIdList: []
      }
    };
  },
  computed: {
    ...mapState(["hr"]),
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
  },

  created() {
    // 菜单选中工作台
    this.$store.state.navtab.openKeys = [];
    this.$store.state.navtab.openKeys.push("/dashboard");
    this.$store.state.navtab.selectedKeys = [];
    this.$store.state.navtab.selectedKeys.push("/dashboard");

    this.jiedanS = this.$route.query.jiedanState !== "false";
    this.paidancount = parseInt(this.$route.query.paidancount);
    this.yiwanchengcount = parseInt(this.$route.query.yiwanchengcount);
    this.weiwanchengcount = parseInt(this.$route.query.weiwanchengcount);
    this.yichangcount = parseInt(this.$route.query.yichangcount);
    this.title = this.$route.query.title;
    // console.log(this.weiwanchengcount);
    // console.log("------------" + this.jiedanS);
    const lc = localStorage.getItem("listjiedan");
    this.tcloums = [];
    var ss = lc.split(",");
    var that = this;
    ss.forEach(function (item) {
      var h = {
        title: item,
        dataIndex: item,
        align: "center",
        ellipsis: true,
        width: 150
      };
      if (item === "姓名") {
        h.fixed = "left";
      } else if (item === "身份证号") {
        h.width = 220;
      }

      that.tcloums.push(h);
    });
    that.tcloums.push({
      title: "最后反馈内容",
      dataIndex: "remark",
      width: 120,
      fixed: "right",
      ellipsis: true
    });
    that.tcloums.push({
      title: "状态",
      dataIndex: "status",
      scopedSlots: { customRender: "status" },

      width: 90,
      fixed: "right",
      ellipsis: true
    });
    that.tcloums.push({
      title: "操作",
      dataIndex: "action",
      width: 80,
      align: "center",
      fixed: "right",
      scopedSlots: { customRender: "action" },
      ellipsis: true
    });
    // console.log(this.tcloums)
    this.getDetail();
  },

  methods: {
    getInfo() {
      this.$request({
        url: `/hr/api/v1/missionCenters/selectReceiveTopStatistics/` + this.$route.query.socDispatchId,
        method: "GET"
      }).then(({ data }) => {
        this.paidancount = data.dispatchEmpCount;
        this.yiwanchengcount = data.completedCount;
        this.weiwanchengcount = data.unfinishedCount;
        this.yichangcount = data.abnormalCount;
      });
    },
    clickTab(index) {
      this.state = index;
      this.getDetail();
    },
    // 初始化数据
    initData() {
      this.pagination.current = 1;
      this.params.pageNo = 1;
      this.selectedRowKeys = [];
    },

    start() {
      // let erro = false;
      // for (var i = 0; i < this.dataSource.length; i++) {
      //     for (var j = 0; j < count; j++) {
      //       if (this.dataSource[i].id === this.selectedRowKeys[j]) {
      //         name += this.dataSource[i]["姓名"] + ",";
      //         cards += this.dataSource[i]["身份证号"] + ",";
      //       }
      //     }
      //   }
      // if(erro){
      //   this.$message.error("接单后，才能进行反馈");
      //   return;
      // }
      this.loading = true;
      this.loading = false;
      if (this.selectedRowKeys.length > 1) {
        let name = "";
        let cards = "";
        const count = this.selectedRowKeys.length > 3 ? 3 : this.selectedRowKeys.length;
        for (var i = 0; i < this.dataSource.length; i++) {
          for (var j = 0; j < count; j++) {
            if (this.dataSource[i].id === this.selectedRowKeys[j]) {
              name += this.dataSource[i]["姓名"] + ",";
              cards += this.dataSource[i]["身份证号"] + ",";
            }
          }
        }
        this.feedOptions = {
          姓名: name + "等" + this.selectedRowKeys.length + "人",
          身份证号: cards + "等" + this.selectedRowKeys.length + "人",
          status: 0
        };
      } else {
        let name = "";
        let icard = "";
        for (var ii = 0; ii < this.dataSource.length; ii++) {
          if (this.dataSource[ii].id === this.selectedRowKeys[0]) {
            name = this.dataSource[ii]["姓名"];
            icard = this.dataSource[ii]["身份证号"];
          }
        }
        this.feedOptions = { 姓名: name, 身份证号: icard, status: 0 };
      }
      this.feedVisible = true;
    },
    daochu() {
      var dat = {
        missionCenterId: this.$route.query.socDispatchId
      };
      if (this.keyWord) {
        dat.keyWord = this.keyWord;
      }
      if (this.state !== -1) {
        dat.state = this.state;
      }
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        dat.itemIdList = this.selectedRowKeys;
      }

      axios({
        url: `/hr/api/v1/missionCenterItems/exportReceivePath`,
        method: "post",
        data: dat,
        responseType: "blob"
        // headers: {
        //   token: token,
        //   "Content-Type": "application/json"
        // }
      })
        .then((res) => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", `${this.title}` + ".xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
      // this.$request({
      //   url: `/hr/api/v1/missionCenterItems/exportReceivePath/` + this.$route.query.socDispatchId,
      //   method: "POST",
      //   responseType: "blob"
      // }).then(({ data }) => {
      // if (data && data.type === "application/json") {
      //       const link = document.createElement("a");
      //     const blob = new Blob([data], {
      //       type: "application/vnd.ms-excel"
      //     });
      //     link.style.display = "none";
      //     link.href = URL.createObjectURL(blob);
      //     link.setAttribute("download", `${this.$store.state.hr.companyName}_` + "员工导出记录" + ".xlsx");
      //     document.body.appendChild(link);
      //     link.click();
      //     document.body.removeChild(link);
      // }
      // });
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
    },
    // 翻页
    handlePage(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.params.pageNo = this.pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getDetail();
    },
    handelEvent(e) {
      if (!this.jiedanS) {
        return;
      }
      this.feedVisible = true;
      this.feedOptions = e;
      this.$refs.child.$emit("getHistory", this.feedOptions.id);
    },
    goBack() {
      // this.$router.push({
      //   path: `/shebao/jiedan`,
      //   query: { ...this.$route.query }
      // });
      this.$router.go(-1);
    },
    onConfi() {
      this.$request({
        url: `/hr/api/v1/missionCenters/confirmReceive/` + this.$route.query.socDispatchId,
        method: "PUT"
      }).then(({ data }) => {
        this.jiedanS = data;
        if (this.jiedanS) {
          this.$message.success("接单成功");
        }
      });
    },
    getDetail() {
      var pa = { missionCenterId: this.$route.query.socDispatchId, pageNo: this.pagination.current, pageSize: this.pagination.pageSize };
      if (this.state >= 0) {
        pa.state = this.state;
      }
      if (this.keyWord) {
        pa.keyWord = this.keyWord;
      }
      this.$request({
        url: `/hr/api/v1/missionCenterItems/selectMissionCenterItem/`,
        method: "GET",
        params: pa
      }).then(({ data }) => {
        this.dataSource = [];
        var that = this;
        data.entities.forEach(function (item) {
          const j = JSON.parse(item.tableData);
          j.id = item.id;
          j.status = item.state;
          j["action"] = "反馈";
          j["remark"] = item.remark;
          that.dataSource.push(j);
        });
        this.pagination.total = data.entityCount;
      });
    },

    // 搜索姓名
    onSearchName(name) {
      this.initData();
      this.keyWord = name;
      this.getDetail();
    },

    handleDetail({ visible, success, options }) {
      this.feedVisible = visible;

      if (!success) {
        this.selectedRowKeys = [];
        this.getDetail();
      }
      if (success) {
        this.postData.state = options.status;
        this.postData.remark = options.remake;
        // this.postData.itemIds = this.$route.query.id;
        this.postData.itemIdList = this.selectedRowKeys.length ? this.selectedRowKeys : [options.id];
        this.submitFeedBack();
      }
    },
    // 反馈提交
    submitFeedBack() {
      this.$request({
        url: `/hr/api/v1/missionCenterItems/feedback`,
        method: "post",
        data: this.postData
      }).then(({ success }) => {
        if (success) {
          this.initData();
          this.getDetail();
          this.getInfo();
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.revset {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #fff;
  height: 100vh;
}
.payslip-detail {
  padding: 24px;
  .top {
    position: relative;

    .pos {
      position: absolute;
      right: 0;
      top: 6px;
    }
  }
}
.salary {
  cursor: pointer;
  margin: 24px 0;
  .item {
    width: 100%;
    padding: 24px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  >>> .ant-statistic-content {
    font-size: 18px;
  }
}
.inner-box {
  display: flex;
  flex-direction: row;
  height: 600px;
  .inner-left {
    width: 300px;
  }
  .inner-right {
    width: calc(100% - 300px);
  }
}
.center {
  text-align: center;
}
.info-left {
  border-right: 1px solid #ccc;
  padding: 20px 56px 30px 0;
  width: 350px;

  .info-item {
    line-height: 34px;
  }
  .name {
    margin-top: 16px;
  }
}
.inner-right-foot {
  padding: 16px;
}
.round {
  height: 4px;
  width: 4px;
  display: inline-block;
  border-radius: 4px;
}
.no {
  background: #fd7d4c;
}
.ok {
  background: #48cb9e;
}
.err {
  background: red;
}
</style>
